<template>
  <div class="page-container">
    <div class="table-title">
      <h2>项目生化去除率周报 ({{ formattedDateRange }})</h2>
    </div>
    <div class="separator"></div>
    <div class="date-selector">
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        @change="validateDateRange"
      ></el-date-picker>
      <el-button @click="fetchData" class="fetch-button">查看</el-button>
      <span v-if="dateRange.length !== 2" class="date-hint">
        <i class="el-icon-warning-outline"></i> 请选择连续的七天
      </span>
    </div>
    <div class="separator"></div>
    <div class="table-container">
      <el-table :data="paginatedRows" style="width: 100%" border>
        <!-- 表格列定义 -->
        <el-table-column label="序号" width="50" align="center" sortable>
          <template slot-scope="scope">
            {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="project" label="项目部" width="120" align="center" sortable></el-table-column>
        <el-table-column :label="lastWeekLabel" width="240" align="center">
          <el-table-column prop="regulationPoolAvg1" label="调节池均值 (mg/L)" width="80" align="center" sortable></el-table-column>
          <el-table-column prop="secondarySedimentationAvg1" label="二沉池均值 (mg/L)" width="80" align="center" sortable></el-table-column>
          <el-table-column prop="bioRemovalRate1" label="生化去除率 (%)" width="80" align="center" sortable></el-table-column>
        </el-table-column>
        <el-table-column :label="thisWeekLabel" width="240" align="center">
          <el-table-column prop="regulationPoolAvg2" label="调节池均值 (mg/L)" width="80" align="center" sortable></el-table-column>
          <el-table-column prop="secondarySedimentationAvg2" label="二沉池均值 (mg/L)" width="80" align="center" sortable></el-table-column>
          <el-table-column prop="bioRemovalRate2" label="生化去除率 (%)" width="80" align="center" sortable></el-table-column>
        </el-table-column>
        <el-table-column label="数据分析" width="240" align="center">
          <el-table-column prop="regulationPoolDiff" label="调节池均值差异" width="80" align="center" sortable></el-table-column>
          <el-table-column prop="secondarySedimentationDiff" label="二沉池均值差异" width="80" align="center" sortable></el-table-column>
          <el-table-column prop="bioRemovalRateDiff" label="生化去除率差异" width="80" align="center" sortable></el-table-column>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="rows.length"
        style="margin-top: 20px; text-align: center;"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { fetchBioRemovalReportData } from '@/api/count/bioRemovalReportApi';

export default {
  data() {
    return {
      dateRange: [],
      rows: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      loading: false,
      currentPage: 1, // 当前页码
      pageSize: 5 // 每页显示条数
    };
  },
  computed: {
    formattedDateRange() {
      if (this.dateRange.length === 2) {
        const [start, end] = this.dateRange.map(date => date.toLocaleDateString());
        return `${start} - ${end}`;
      }
      return '请选择日期';
    },
    lastWeekLabel() {
      if (this.dateRange.length === 2) {
        const start = new Date(this.dateRange[0]);
        start.setDate(start.getDate() - 7);
        const end = new Date(this.dateRange[0]);
        end.setDate(end.getDate() - 1);
        return `上周数据 (${start.toLocaleDateString()} - ${end.toLocaleDateString()})`;
      }
      return '上周数据 (请选择日期范围)';
    },
    thisWeekLabel() {
      if (this.dateRange.length === 2) {
        const start = new Date(this.dateRange[0]);
        const end = new Date(this.dateRange[1]);
        return `本周数据 (${start.toLocaleDateString()} - ${end.toLocaleDateString()})`;
      }
      return '本周数据 (请选择日期范围)';
    },
    paginatedRows() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.rows.slice(start, end);
    }
  },
  methods: {
    validateDateRange() {
      if (this.dateRange.length === 2) {
        const diffTime = Math.abs(this.dateRange[1] - this.dateRange[0]);
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
        if (diffDays !== 6) {
          this.$message.error('请选择连续的七天');
          this.dateRange = [];
        }
      }
    },
    async fetchData() {
      if (this.dateRange.length !== 2) {
        this.$message.error('请选择日期范围');
        return;
      }
      this.loading = true;
      try {
        const data = await fetchBioRemovalReportData(this.dateRange);
        this.rows = data; // 假设后端返回的数据结构与当前的rows一致
        console.log(data);
      } catch (error) {
        this.$message.error('数据获取失败，请重试');
      } finally {
        this.loading = false;
      }
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.currentPage = 1; // 重置当前页码
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
    }
  }
};
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: #f0f8ff; /* 更改背景颜色 */
  height: 100vh;
}

.table-title h2 {
  margin-bottom: 20px;
  color: #333;
  text-align: center;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

.separator {
  width: 80%;
  max-width: 1200px;
  height: 1px;
  background-color: #ddd;
  margin: 20px 0;
}

.date-selector {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.date-hint {
  margin-left: 10px;
  color: #ff4d4f;
}

.fetch-button {
  margin-left: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.el-table {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 80%;
  max-width: 1200px;
}

.el-table th, .el-table td {
  font-family: Arial, sans-serif;
  color: #555;
}
</style>
